<template>
	<view class="page">
		<view class="header">
			<view class="companyBox">
				<view class="companyName">
					{{custom.companyName}}
				</view>
				
				<view class="state" @click="state" v-if="custom.customFlowList[0].status !== 0 && userinfo.userType == 0">
					跟进
				</view>
			</view>
			
			<view class="list">
				<view class="left">
					电&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp话
				</view>
				<view class="right">
					{{custom.companyMobile}}
				</view>
			</view>
			<view class="list">
				<view class="left">
					预估电量
				</view>
				<view class="right">
					{{custom.electricityNum}} Kwh
				</view>
			</view>
			<view class="list" v-if="userinfo.userType == 0">
				<view class="left">
					跟进状态
				</view>
				<view class="right" style="color: #FF9C24;">
					{{Lst[custom.customFlowList[0].status].shortName||"待跟进"}}
				</view>
			</view>
			<view class="list" v-if="userinfo.userType == 0">
				<view class="left">
					跟进次数
				</view>
				<view class="right">
					{{custom.customFlowList.length}}
				</view>
			</view>
			<view class="list">
				<view class="left">
					备&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp注
				</view>
				<view class="right">
					{{custom.customFlowList[0].remark||"未填写"}}
				</view>
			</view>
		</view>
		<view class="footer" v-if="userinfo.userType == 0">
			<view class="list" style="padding: 0;">
				<view class="left" style="font-size: 28rpx; width: 100%;">
					跟进记录
				</view>
			</view>
			<u-time-line>
				<view v-for="(item,index) in custom.customFlowList" :key="index">
					<u-time-line-item nodeTop="4" v-if="index == 0">
						<!-- 此处自定义了左边内容，用一个图标替代 -->
						<template v-slot:node >
							<view class="u-node" style="background: #2E6ADF;">
								<!-- 此处为uView的icon组件 -->
								<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view>
								<view class="u-order-title">{{Lst[item.status].shortName}}</view>
								<view class="u-order-desc">备注：{{item.remark||"待填写"}}</view>
								<view class="u-order-time">{{item.createDate}}</view>
							</view>
						</template>
					</u-time-line-item>
					
					<u-time-line-item v-else>
						<!-- 此处自定义了左边内容，用一个图标替代 -->
						
						<template v-slot:content>
							<view>
								<view class="u-order-title">{{Lst[item.status].shortName}}</view>
								<view class="u-order-desc">备注：{{item.remark||"待填写"}}</view>
								<view class="u-order-time">{{item.createDate}}</view>
							</view>
						</template>
					</u-time-line-item>
				</view>
				
				
			</u-time-line>

			<u-popup v-model="show" mode="bottom" height="80%">
				<view class="modelTxt">跟进状态 </view>
				<view class="select">
					<u-radio-group v-model="form.status" wrap="true">
						<u-radio v-for="(item, index) in Lst" :key="index" :name="index" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
				<view class="item">
					<view class="top">
						<view class="txt">
							备&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp注
						</view>
						<view class="I">
							*
						</view>
					</view>
					<view class="bottom">
						<view class="centent">
							<textarea v-model="form.remark" placeholder="请输入备注" class="put"></textarea>
						</view>
					</view>
				</view>
				<view class="submitBox">
					<view class="submit" @click="submit">
						确认签约
					</view>
				</view>
				
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				id:0,
				benchmarkPrice:0,
				avgPrice:0,
				Lst: [{
						name: 'A-已签约',
						shortName: '已签约',
						disabled: false
					},
					{
						name: 'B-意向签约',
						shortName: '意向签约',
						disabled: false
					},
					{
						name: 'C-待跟进',
						shortName: '待跟进',
						disabled: false
					},
					{
						name: 'D-暂不考虑',
						shortName: '暂不考虑',
						disabled: false
					},
					{
						name: 'E-待线上联系',
						shortName: '待线上联系',
						disabled: false
					},
					{
						name: 'F-待分配客户',
						shortName: '待分配客户',
						disabled: false
					},
					{
						name: 'G-无效客户',
						shortName: '无效客户',
						disabled: false
					}
				],
				custom:{},
				userinfo:{},
				form:{
					remark:''
				}
			}
		},
		onLoad(options) {
			this.id = options.id
			uni.setNavigationBarTitle({
				title: `${uni.getStorageSync("userinfo").userType == 0 ? '客户' : '档案'}详情`
			})
			this.getCustom()
		},
		onShow() {
			this.userinfo = uni.getStorageSync("userinfo")
			this.getPrice()
		},
		methods:{
			getPrice(){
				//获取上限基准价
				this.$axios.request(this.$api.getTenant, "GET").then((val)=>{
					this.avgPrice = val.data.avgPrice
					this.benchmarkPrice = val.data.benchmarkPrice
				})
			},
			state() {
				this.show = true
			},
			getCustom(){
				this.$axios.request(`${this.$api.getCustom}/${this.id}`,"GET").then((val) => {
					this.custom = val.data
				})
			},
			submit(){
				this.form.customId = this.id
				//更改已签约状态
				if(this.form.status == 0){
					if(this.custom.serviceModes == null){
						this.$msg.toast("请选择签约模式")
						return
					}
					if(this.custom.modeValue == null){
						this.$msg.toast("请完善比例或服务费比例")
						return
					}
					this.form.money = this.$utils.counter(
						uni.getStorageSync("userinfo").tenantCode,//租户
						this.$utils.getIsGuoNeng(),//售电公司
						this.custom.serviceModes.tag,//签约模式
						this.benchmarkPrice,//燃煤上网标杆基准价
						this.custom.electricityNum,//签约电量
						this.custom.modeValue,//公司占比
						this.custom.modeValue,//服务费单价
						this.avgPrice
					)
				}
			
				this.$axios.request(this.$api.addCustomFlow,"POST",this.form).then((val) => {
					this.show = false
					this.getCustom()
				})
			}
		}
	}
</script>

<style>
	.page {
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		background-color: #f9f9f9;
	}

	.header {
		width: 100%;
		height: 471rpx;
		background-color: #FFFFFF;
		margin-top: 16rpx;
	}

	.companyBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 72rpx;
		padding: 0 32rpx;
	}

	.companyName {
		height: 40rpx;
		font-size: 32rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		line-height: 40rpx;
		color: #333333;
	}

	.state {
		width: 80rpx;
		height: 42rpx;
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 400;
		line-height: 42rpx;
		background-color: #2E6ADF;
		border-radius: 4rpx;
		text-align: center;
		color: #FFFFFF;
	}

	.list {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: 65rpx;
		padding: 0 32rpx;
	}

	.left {
		width: 130rpx;
		height: 65rpx;
		margin-right: 32rpx;
		line-height: 65rpx;
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		line-height: 65rpx;
		color: #333333;
	}

	.right {
		height: 65rpx;
		line-height: 65rpx;
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		line-height: 65rpx;
		color: #707070;
	}

	.footer {
		width: 100%;
		height: 789rpx;
		margin-top: 16rpx;
		padding: 0 32rpx;
		background-color: #FFFFFF;
	}

	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 32rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 30rpx;
	}
	.modelTxt {
		width: 100%;
		height: 80rpx;
		font-size: 32rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		line-height: 80rpx;
		padding:  0 32rpx;
		color: #333;
		background-color: #E8F0FF;
		text-align: left;
	}
	.select {
		width: 100%;
		padding: 0 32rpx;
		margin: 32rpx auto;
	}
	u-radio-group {
		display: flex;
		justify-content: center;
	}
	
	.item {
		width: 750rpx;
		/* height: 136rpx; */
		background-color: #FFFFFF;
		margin-top: 16rpx;
		/* background-color: red; */
	}
	
	.bottom,
	.top {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		padding: 0 32rpx;
		/* margin: 0 32rpx; */
	}
	
	.top {
		height: 68rpx;
	}
	
	.bottom {
		border-top: 1rpx solid #E1E1E1;
	}
	
	.txt,
	.I {
		height: 40rpx;
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		line-height: 40rpx;
		color: #333333;
	}
	
	.I {
		color: #F35B47;
		margin-left: 10rpx;
		line-height: 54rpx;
	}
	.put {
		width: 646rpx;
		height: 240rpx;
		border: 1rpx solid #E1E1E1;
		margin: 12rpx auto 0;
		padding:  20rpx;
	}
	.submitBox {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 96rpx;
		padding: 0 32rpx;
		background-color: #FFFFFF;
	}
	.submit {
		width: 686rpx;
		height: 64rpx;
		border-radius: 4rpx;
		background-color: #2E6ADF;
		font-size: 32rpx;
		font-family: "PingFang SC";
		font-weight: 400;
		line-height: 64rpx;
		text-align: center;
		color: #FFFFFF;
	}
</style>
